<template>
  <div class="play" v-if="currentPlaySong">
    <audio
      hidden
      v-if="currentPlaySong"
      :src="currentPlaySongUrl"
      controls
      autoplay
      style="height: 30px; margin-bottom: 100px"
      ref="audio"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeupdate"
      @durationchange="onDurationchange"
      @ended="playNextSong"

    ></audio>
    <PlayBar
      @click.native="isFullScreen = true" 
      :currentPlaySong="currentPlaySong"
      :playing="playing"
      :currentTime="currentTime"
      :duration="duration"
      @toggle-gedan="showGedan = $event"
    ></PlayBar>
    <transition name="fade">
      <PlayPage
        v-if="isFullScreen"
        :currentPlaySong="currentPlaySong"
        :playing="playing"
        :currentTime="currentTime"
        :duration="duration"
        @update:current-time="updateCurrentTime"
        @toggle-play="togglePlay"
        @toggle-gedan="showGedan = $event"
        @suijibof="playMode === 'sx' ? (playMode = 'sj') : (playMode = 'sx')"
        :playMode="playMode"
      ></PlayPage>
    </transition>

    <section class="gedan" v-show="showGedan" @click="showGedan = false">
      <transition name="fade">
        <div v-if="showGedan" class="mask"></div>
      </transition>
      <transition name="slide">
        <div class="content" v-if="showGedan">
          <ul>
            <SongItem
              v-for="song in gedan"
              :key="song.id"
              :song="song"
              @update:current-play-song="
                $emit('update:current-play-song', $event)
              "
              :currentPlaySongId="currentPlaySongId"
              :playing="playing"
            ></SongItem>
          </ul>
        </div>
      </transition>
    </section>
  </div>
</template>

<script>
import PlayBar from "@/components/PlayBar.vue";
import PlayPage from "@/components/PlayPage.vue";
import SongItem from "@/components/SongItem.vue";

export default {
  components: {
    PlayBar,
    PlayPage,
    SongItem,
  },

  props: ["currentPlaySong", "currentPlaySongId", "playing", "gedan"],

  data: function () {
    return {
      //   playing: false,
      isFullScreen: false,
      currentTime: 0,
      duration: 0,
      showGedan: false,
      playMode: "sx",
    };
  },
  computed: {
    currentPlaySongUrl: function () {
      if (!this.currentPlaySong) return "";
      return `https://music.163.com/song/media/outer/url?id=${this.currentPlaySong.id}.mp3`;
    },
  },

  methods: {
    onPlay: function () {
      this.$emit("update:playing", true);
    },
    onPause: function () {
      this.$emit("update:playing", false);
    },
    onTimeupdate: function (event) {
      this.currentTime = event.target.currentTime;
      // console.log(this.$refs.audio.currentTime);
    },
    onDurationchange: function (event) {
      this.duration = event.target.duration;
    },

    updateCurrentTime: function (t) {
      // console.log(this.$refs.audio, t);
      this.$refs.audio.currentTime = t;
    },
    togglePlay: function (playing) {
      playing ? this.$refs.audio.play() : this.$refs.audio.pause();
    },

    playNextSong: function () {
      var nextSong;
      var currentIndex;
      switch (this.playMode) {
        case "sx":
          currentIndex = this.gedan.findIndex(
            (item) => item.id === this.currentPlaySongId
          );
          // console.log(this.gedan.length);
          var nextIndex =
            currentIndex === this.gedan.length - 1 ? 0 : currentIndex + 1;
          nextSong = this.gedan[nextIndex];
          break;
        case "sj":
          currentIndex = this.gedan.findIndex(
            (item) => item.id === this.currentPlaySongId
          );

          var leftSong = this.gedan.filter(
            (item) => item.id !== this.currentPlaySongId
          );
          nextSong = leftSong[Math.floor(Math.random() * leftSong.length)];
          break;

        default:
          break;
      }

      this.$emit("update:current-play-song", nextSong);
    },

    playPreSong: function () {
      var preSong;
      var currentIndex;
      switch (this.playMode) {
        case "sx":
          currentIndex = this.gedan.findIndex(
            (item) => item.id === this.currentPlaySongId
          );
          var preIndex =
            currentIndex === 0 ? this.gedan.length - 1 : currentIndex - 1;
          preSong = this.gedan[preIndex];
          break;
        case "sj":
          currentIndex = this.gedan.findIndex(
            (item) => item.id === this.currentPlaySongId
          );

          var leftSong = this.gedan.filter(
            (item) => item.id !== this.currentPlaySongId
          );
          preSong = leftSong[Math.floor(Math.random() * leftSong.length)];
          break;

        default:
          break;
      }

      this.$emit("update:current-play-song", preSong);
    },
  },

  // mounted: function () {
  //   console.log("Play mounted", this.$refs.audio);
  // },
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
.slide-enter, .slide-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(60vh);
}
.slide-enter-to, .slide-leave /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(0px);
}
.gedan {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  .mask {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100vw - 30px);
    height: 60vh;
    background: white;
    margin: 15px;
    border-radius: 15px;
    overflow-y: auto;
  }
}
</style>
